import React, { useState, useEffect } from 'react';
import  { Divider } from 'antd-mobile';
import { ThunderboltOutlined } from '@ant-design/icons';
import { ClockCircleOutline, StarOutline, MoreOutline } from 'antd-mobile-icons';
import { useHistory } from "react-router-dom";

import { CUSTOM_LAYOUT_STORAGE_KEY, SettingSwitchKeys } from '../../constants';

import './style.scss';

interface BarProps { };

const Bar: React.FC<BarProps> = (props) => {
  const history = useHistory();
  const [settingInfo, setSettingInfo] = useState({
    [SettingSwitchKeys.strongMessage]: true,
    [SettingSwitchKeys.atMeMessage]: true,
    [SettingSwitchKeys.concernMessage]: true,
    [SettingSwitchKeys.dealLaterMessage]: true,
    [SettingSwitchKeys.messageChannel]: true,
    [SettingSwitchKeys.conversationGroup]: false,
  });

  useEffect(() => {
    const setting = localStorage.getItem(CUSTOM_LAYOUT_STORAGE_KEY);
    if (setting) {
      try {
        setSettingInfo({ ...settingInfo, ...JSON.parse(setting) });
      } catch (e) {
        console.log(e);
      }
    }
  }, []);

  const barItems = [
    { title: '', key: SettingSwitchKeys.strongMessage, icon: <ThunderboltOutlined />, divider: true },
    { title: '@我的', key: SettingSwitchKeys.atMeMessage, icon: '@' },
    { title: '特别关注', key: SettingSwitchKeys.concernMessage, icon: <StarOutline /> },
    { title: '稍后处理', key: SettingSwitchKeys.dealLaterMessage, icon: <ClockCircleOutline /> },
  ];

  const handleToPage = (key) => {
    if (key === 'strongMessage') {
      history.push({pathname: `/strongMessage/${key}`, search: `?userId=${props.mySdkStore.mockConfig.userId}` });
      return;
    }
    history.push({pathname: `/messageChannel/${key}`, search: `?userId=${props.mySdkStore.mockConfig.userId}` });
  }

  return (
    <div className="barContainer">
      {
        barItems.map(i =>
        settingInfo[SettingSwitchKeys[i.key]] ?
        <span key={i.key}>
          <a className="barButton" onClick={() => handleToPage(i.key)} color='rgba(0,0,0,0.43)' fill='outline' style={{ marginRight: i.divider ? 0 : 20 }}>{i.icon}</a>
          { i.divider && <Divider direction='vertical' /> }
        </span> : null
        )
      }
      <MoreOutline className="moreBtn" onClick={() => history.push({ pathname: '/layoutSetting'})} />
    </div>
  );
};

export default Bar;